<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>部门管理</title>
  <link href="../../css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../js/jquery.js"></script>
  <script type="text/javascript" src="../../js/api.js"></script>
  <script type="text/javascript" src="../../js/axios.js"></script>
  <script type="text/javascript" src="../../js/commons/messageInfo.js"></script>
  <script type="text/javascript" src="../../js/system/dept/deptList.js"></script>

  <script src="../../js/commons/react.js"></script>
  <script src="../../js/commons/reactDom.js"></script>
  <script src="../../js/commons/babel.js"></script>

  <style>
    .select {
      width: 100px;
      height: 30px;
    }
  </style>

</head>

<body>
  <div class="place"> <span>位置：</span>
    <ul class="placeul">
      <li><a href="../users/userList.html">系统管理</a></li>
      <li><a href="deptList.html">部门管理</a></li>
      <li><a href="#">修改</a></li>
    </ul>
  </div>
  <div class="formbody">
    <div class="formtitle"><span>部门信息</span></div>
    <ul class="forminfo">
      <li>
        <label>部门编号</label>
        <input name="deptId" type="text" class="dfinput" id="deptId" readonly />
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>部门名称</label>
        <input name="dept" type="text" class="dfinput" id="dept" />
        <i>必填，不能超过30个字符</i>
      </li>
      <li id="select">
      </li>
      <li>
        <label>&nbsp;</label>
        <input type="button" class="btn" value="确认保存" onclick="save('update',obj)" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" class="btn" value="返回" onclick="window.history.go(-1);" />
      </li>
    </ul>
  </div>

  <script type="text/javascript">
    let obj={}
  </script>

  <script type="text/babel">
    let arr = location.href.split('=')
    let did = arr[arr.length - 1]

    appendMsgBox()

    const Select = () => {
      const [area, setArea] = React.useState(null)
      const [city, setCity] = React.useState(null)
      const [pid,setPid]=React.useState(0)
      const [cid,setCid]=React.useState(0)

      React.useEffect(() => {
        getArea(setArea,setCity)
        axiosRequest1("get", `/dept/deptInfo/${did}`).then(res => {
          const { code, message, data } = res.data
          $('#deptId').val(data.deptId)
          $('#dept').val(data.deptName)
          setPid(data.pId)
          setCid(data.cId)
          obj=data
        }, err => {
          console.log(err);
        })
      }, [])

      React.useEffect(()=>{
        if(area===null || pid===0) return;
        selectProvince(pid)
        $('#province').val(pid)
      },[area,pid])

      React.useEffect(()=>{
        if(city===null || cid===0) return
        $('#city').val(cid)
      },[city,cid])

      const selectProvince =async (id) => {
        for (let i = 0; i < area.length; i++) {
          if (area[i].id == id) {
            setCity(area[i].city)
            break
          }
        }
      }

      return (
        <div>
          <label>所属区域：</label>
          <select onChange={e => selectProvince(e.target.value)} id="province" className="select">
            <option value={0}>请选择省份</option>
            {area !== null && area.map((item, index) => (<option key={item.id} value={item.id}>{item.pName}</option>))}
          </select>
          <select id='city' className="select">
            <option value={0}>请选择城市</option>
            {city !== null && city.map(item => (<option key={item.id} value={item.id}>{item.cName}</option>))}
          </select>
          <i>请选择省份、城市</i>
        </div>
      )
    }

    ReactDOM.createRoot(document.querySelector('#select')).render(<Select />)
  </script>

</body>

</html>